<template>
  <div class="print-box" style="width:20cm; height:28cm;font-size:10.5pt;">
    <div class="header">
      <div>
        <div class="barcode" v-html="svgString"></div>
      <div>
        <p>{{data.proId}}</p>
        <p>{{timeString}}</p>
      </div>
      </div>
    </div>
    <div style="line-height:30pt;font-size:22pt;text-align:center;">
      渝中区政务信息化项目申报表
    </div>
    <div style="padding: .2cm;font-size:14pt;">
      <span style="display:inline-block;width: 15cm;">单位名称（盖章）:</span>
      <span >年 <span style="display:inline-block;padding:0 .5cm;">月</span>   日</span>
    </div>
    <div style="border:1px solid black;">
      <div class="print-row">
        <span class="print-label">
          项目名称
        </span>
        <span>{{data.entryName}}</span>
      </div>
      <div class="print-row">
        <div class="print-col">
          <span class="print-label">项目负责人</span>
          <span>{{data.projectLeader}}</span>
        </div>
        <div class="print-col">
          <span class="print-label">联系电话</span>
          <span>{{data.telephoneNumber}}</span>
        </div>
      </div>
      <div class="print-row">
        <div class="print-col">
          <span class="print-label">项目联系人</span>
          <span>{{data.projectContact}}</span>
        </div>
        <div class="print-col">
          <span class="print-label">联系电话</span>
          <span>{{data.contactTelephone}}</span>
        </div>
      </div>
      <div class="print-row">
        <span class="print-label">
          项目类别
        </span>
        <span style="display:flex;justify-content:space-around;text-align:center;">
          <div style="width:120pt" :class="{correct: data.projectCategory === '0'}">建设类（新开工） </div>
          <div style="width:100pt" :class="{correct: data.projectCategory === '1'}">建设类（续建）</div>
          <div style="width:80pt" :class="{correct: data.projectCategory === '2'}">购买服务类</div>
          <div style="width:60pt" :class="{correct: data.projectCategory === '3'}">运维类</div>
          <div style="width:60pt" :class="{correct: data.projectCategory === '4'}">其他</div>
        </span>
      </div>
      <div class="print-row print-rows4">
        <span class="print-label">
          <div class="print-content center">
            项目建设理由
          </div>
        </span>
        <span>{{data.reasonsForProjectConstruction}}</span>
      </div>
      <div class="print-row print-rows4">
        <span class="print-label">
          <div class="print-content center">
            项目内容简介
          </div>
        </span>
        <span>{{data.projectContentIntroduction}}</span>
      </div>
      <div class="print-row print-rows4">
        <span class="print-label">
          <div class="print-content center">
            预期效果描述
          </div>
        </span>
        <span>{{data.expectedEffectDescription}}</span>
      </div>
      <div class="print-row">
        <div class="print-col">
          <span class="print-label">项目投资估算</span>
          <span>{{data.projectInvestmentEstimation}}万元</span>
        </div>
        <div class="print-col">
          <span class="print-label">资金来源</span>
          <span>{{data.sourceOfFunds}}</span>
        </div>
      </div>
      <div class="print-row none print-rows4">
        <span class="print-label">
          <div class="print-content center">
            项目进展<br/>（项目开展时间、运营模式、项目阶段、项目进度等）
          </div>
        </span>
        <span class="print-content center">{{data.preliminaryWorkCompletion}}</span>
      </div>
    </div>
    <div style="padding:.2cm;font-size:14pt;">
      <span style="display:inline-block;width: 8cm;">填表人:</span>
      <span>联系电话:</span>
    </div>
  </div>
</template>

<script>
import { barcode } from 'pure-svg-code'

export default {
  name: 'PrintBox',
  props: ['data'],
  data() {
    return {
      timeString: new Date().toLocaleString()
    }
  },
  computed: {
    svgString() {
      return barcode(this.data.proId, "ean13", {width:'50', barWidth:1, barHeight:50});
    }
  }
}
</script>

<style lang="scss">
.print-label{
  display:inline-block;
  padding: 5pt;
  width: 100pt;
  min-width: 100pt;
  border-right: 1px solid black;
  vertical-align: middle;
  text-align: center;
}
.print-label+span{
  word-break: break-all;
  padding: 5pt;
}
.print-row{
  border-bottom:1px solid black;
  display: flex;
}
.print-row .print-col{
  display: inline-block;
  width: 50%;
  height: 100%;
  flex-shrink: 1;
}
.print-col+.print-col{
  border-left: 1px solid black;
}
.print-row.none{
  border-bottom:none;
}
.print-row.print-rows4{
  min-height: 4cm;
}
.print-content.center{
  min-height: 4cm; display:flex;justify-content:center;align-items:center;
}
.correct:after{
  content: '\2713';
  color: black;
  padding:1pt 3pt;
  border: 1px solid #ccc;
  margin-left: 5pt;
}
.print-box{
  .header{
    text-align: right;
    &>div{
      display: inline-block;
    }
    p{
      margin: 0;
      font-size: 8pt;
      line-height: 10pt;
      text-align: right;
    }
  }
  .barcode{
    margin-left: 15pt;
    margin-bottom: 2pt;
    width: 100pt;
    height: 20pt;
    overflow: hidden;
  }
}
</style>